<template>
  <div :class="$style.wrap">
    <Title title="任务基本信息" :title-class="$style.title" style="padding-top:0"></Title>
    <List :column="4" sep=":" :gutter="24" default-value="--">
      <ListItem label="客户类型" :value="info.customerType === 2 || info.customerType === '2' ? '顾客' : '商家'"></ListItem>
      <ListItem label="任务状态" dict-type-code="KQ_TASK_STATUS" :value="info.state"></ListItem>
      <ListItem label="经销商姓名" :value="info.legalPerson"></ListItem>
      <ListItem label="经销商编码" :value="info.disCode"></ListItem>
      <ListItem label="经销商经营状态" :value="info.clientDisInfoDTO && info.clientDisInfoDTO.businessStatus || '--'" dict-type-code="BUSINESS_STATUS"></ListItem>
      <ListItem label="启用状态" :value="(info.clientDisInfoDTO && (info.clientDisInfoDTO.status === 1 ? '启用':'停用')) || '--'"></ListItem>
      <ListItem label="客户级别" dict-type-code="KQ_CUSTOMER_LEVEL" :value="info.customerLevel"></ListItem>
      <ListItem label="关怀项目" dict-type-code="KQ_CARE_ITEM" :value="info.careItem"></ListItem>
      <ListItem label="预约关怀日期" :value="info.agreedCareDate"></ListItem>
      <ListItem label="关怀对象" :value="info.careObject"></ListItem>
      <ListItem label="性别" :value="info.careObjectGender===1||info.careObjectGender==='1'?'男':(info.careObjectGender===2||info.careObjectGender==='2'?'女':'--')"></ListItem>
      <ListItem label="电话" :value="info.careObjectPhone"></ListItem>

      <ListItem label="成品客户经理姓名" :value="info.clientDisInfoDTO && info.clientDisInfoDTO.accountManager || '--'"></ListItem>
      <ListItem label="成品客户经理电话" :value="info.clientDisInfoDTO && info.clientDisInfoDTO.accountManagerPhone || '--'"></ListItem>
      <ListItem label="定制客户经理姓名" :value="info.clientDisInfoDTO && info.clientDisInfoDTO.customizeAccountManager || '--'"></ListItem>
      <ListItem label="定制客户经理电话" :value="info.clientDisInfoDTO && info.clientDisInfoDTO.customizeAccountManagerPhone || '--'"></ListItem>

      <ListItem v-if="type==='edit'" :span="24">
        <div slot="content">
          <Title slot="content" title="历史关怀" :title-class="$style.title" style="padding-top:10px"></Title>
          <table-box ref="table" no-request :table-height="120" :table-config="tableConfig" :other-filters="otherFilters"></table-box>
        </div>
      </ListItem>
    </List>
    <AnnexDown :id="hostory" ref="upload" @close="closeAnnexDownHandle"></AnnexDown>
  </div>
</template>
<script>
import { List, ListItem } from '@/components/List'
import Title from '@/components/Title'
import { filtersRaw } from '@/utils'
import { ccDict } from '@/api/dataDict'
import AnnexDown from './annexDown'
export default {
  name: 'BaseInfo',
  components: {
    List,
    ListItem,
    Title,
    AnnexDown
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      hostory: '',
      otherFilters: [],
      tableConfig: {
        interfacePath: '/call-center/api/v1/careTask/page',
        hideFuncBar: true,
        sort: 'createTime',
        order: 'desc',
        setting: [
          {
            label: '序号',
            minWidth: '80',
            align: 'center',
            formatData: v => v.keyIndex + 1
          },
          {
            label: '任务编码',
            width: 120,
            prop: 'taskCode'
          },
          {
            label: '关怀类型',
            width: 120,
            prop: 'careItem',
            formatData: (val) => {
              const careItem = val.careItem.toString().split(',') || []
              const str = []
              this.careItemList.map(list => {
                careItem.forEach(item => {
                  if (Number(list.dictCode) === Number(item)) {
                    str.push(list.dictName)
                  }
                })
              })
              return str.join(',')
            }
          },
          {
            label: '关怀方式',
            width: 120,
            prop: 'careModeName'
          },
          {
            label: '关怀时间',
            width: 120,
            prop: 'careDate'
          },
          {
            label: 'SAP编码',
            width: 120,
            prop: 'disCode'
          },
          {
            label: '客户姓名',
            width: 120,
            prop: 'customerName'
          },
          {
            label: '客户类型',
            prop: 'customerType',
            width: 120,
            formatData: v => {
              v = v.customerType
              for (const item of this.cTypeList) {
                if (item.value === v || item.value.toString() === v) {
                  return item.label
                }
              }
              return ''
            }
          },
          {
            label: '办事处',
            width: 120,
            prop: 'officeName'
          },
          {
            label: '专卖店',
            width: 120,
            prop: 'shopName'
          },
          {
            label: '满意度',
            prop: 'satisfaction',
            width: 120,
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'KQ_SATISFACTION'
            }
          },
          {
            label: '生日核对',
            width: 120,
            prop: 'checkInfo'
          },
          {
            label: '礼品名称',
            width: 160,
            prop: 'careTaskGiftList',
            formatData: v => {
              if (v.careTaskGiftList instanceof Array) {
                return v.careTaskGiftList.map(e => e.giftName).join(',')
              }
              return ''
            }
          },
          {
            label: '备注',
            width: 160,
            prop: 'remarks'
          },
          {
            label: '祝福语',
            width: 160,
            prop: 'blessingWords'
          },
          {
            label: '附件',
            width: 80,
            fixed: 'right',
            align: 'center',
            button: [{
              name: '下载',
              clickFun: (val) => {
                this.hostory = val.id
                this.$refs.upload.visible = true
              },
              className: 'table-handelclick-text'
            }]
          }
        ]
      },
      careItemList: [],
      cTypeList: [
        {
          value: 1,
          label: '商家'
        },
        {
          value: 2,
          label: '顾客'
        }
      ]
    }
  },
  watch: {
    info: {
      handler: 'refresh',
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getDict()
  },
  methods: {
    refresh() {
      if (this.$refs.table === undefined || this.info.customerType === undefined || this.info.credentialNo === undefined) {
        return
      }
      const otherFilters = [
        filtersRaw('customerType', this.info.customerType, '='),
        filtersRaw('credentialNo', this.info.credentialNo, '='),
        filtersRaw('state', '[3,4]', 'in')
      ]
      this.otherFilters = otherFilters
      this.$nextTick(() => {
        this.$refs.table.initTableData()
      })
    },
    // 获取字典
    getDict() {
      ccDict('KQ_CARE_ITEM').then(res => {
        this.careItemList = res.data
      })
    },
    // 附件下载
    closeAnnexDownHandle() {
      this.hostory = ''
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
.title{
  color: rgba(0,0,0,0.85);
  font-size: 16px;
  font-weight: 700;
}
}
</style>
